<template>
  <div>
    <img class="sxc-video" :src="cover" v-if="!play" />
    <sxc-video-player
      v-else
      :video="videoData"
      :mutex="false"
      @play-end="onPlayEnd"
      :playerStart="this.play"
      ref="videoPlayer"
    />
  </div>
</template>

<script>
export default {
  name: 'sxc-video',
  props: {
    videoList: {
      type: Array,
      default: () => []
    },
    play: {
      type: Boolean,
      default: false
    }
  },
  watch:{
    play(){
    }
  },
  data () {
    return {
      defaultImg: './static/img/img-video.png',
      playIndex: 0
    }
  },
  computed: {
    cover () {
      return this.videoList.length && this.videoList[0].coverPath ? this.videoList[0].coverPath : this.defaultImg
    },
    videoData () {
      const { videoList, defaultImg, playIndex } = this
      const url = videoList[playIndex].filePath
      return {
        url: url,
        cover: defaultImg,
        coverPath: videoList[0].coverPath,
        muted: true,
        loop: false,
        preload: 'auto',
        poster: '',
        volume: 1,
        autoplay: this.play
      }
    }
  },
  methods: {
    onPlayEnd () {
      const { videoList, playIndex } = this
      if (playIndex < videoList.length - 1) {
        this.playIndex = playIndex + 1
        setTimeout(() => {
          this.$refs.videoPlayer && this.$refs.videoPlayer.play()
        }, 60)
      }else{
        this.playIndex = 0;
        setTimeout(() => {
          this.$refs.videoPlayer && this.$refs.videoPlayer.play()
        }, 500)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sxc-video {
  width: 100%;
  height: 100%;
}
</style>
